<template>
    <div>
        <div id="my-map" style="width: 100%; height: 75vh"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import AnHuiJson from "@/assets/json/anhui.json";
import TooptipCharts from "./TootipChart.vue";
import { su_zhou_data, other_data } from "./config";
import Vue from "vue";
export default {
    name: "CMap",
    data() {
        return {
            myChart: null,
        };
    },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            const data = [
                { name: "合肥市", value: 3 },
                { name: "滁州市", value: 0 },
                { name: "芜湖市", value: 1 },
                { name: "阜阳市", value: 0 },
                { name: "蚌埠市", value: 0 },
                { name: "淮南市", value: 0 },
                { name: "马鞍山市", value: 0 },
                { name: "安庆市", value: 0 },
                { name: "黄山市", value: 0 },
                { name: "铜陵市", value: 0 },
                { name: "宿州市", value: 0 },
                { name: "淮北市", value: 0 },
                { name: "六安市", value: 0 },
                { name: "池州市", value: 1 },
                { name: "宣城市", value: 0 },
                { name: "亳州市", value: 0 },
            ];

            const itemStyle = {
                normal: {
                    borderColor: "#2980b9",
                    borderWidth: 1,
                    areaColor: "#12235c",
                },
                // 鼠标移动地图时的背景颜色
                emphasis: {
                    disabled: true,
                    areaColor: "#4B7902",
                    label: {
                        show: true,
                        textStyle: {
                            color: "#fff", //鼠标经过字体颜色
                        },
                    },
                },
            };

            const geoCoordMap = {
                宿州市政府: [116.97083, 33.653358],
            };

            const layoutCenter = ["45%", "50%"];
            const layoutSize = "94%";

            const convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push(
                            geoCoord.concat(data[i].value).concat(data[i].name)
                        );
                    }
                }
                return res;
            };

            this.myChart = echarts.init(document.getElementById("my-map"));
            echarts.registerMap("AnHuiJson", AnHuiJson);
            let option = {
                title: {
                    top: 20,
                    text: "",
                    subtext: "",
                    x: "center",
                    textStyle: {
                        color: "#ffffff",
                    },
                },
                tooltip: {
                    show: false,
                },
                // tooltip: {
                //     trigger: "item",
                // formatter: function (params) {
                //     if (typeof params.value[2] == "undefined") {
                //         return params.name + " : " + params.value;
                //     } else {
                //         return params.name + " : " + params.value[2];
                //     }
                // },
                // },
                visualMap: {
                    show: false,
                    max: 100,
                    seriesIndex: [3],
                    inRange: {
                        color: ["#A5DCF4", "#006edd"],
                    },
                },
                geo: {
                    map: "AnHuiJson",
                    // 地图缩放
                    zoom: 1.1,
                    layoutCenter,
                    layoutSize,
                    itemStyle,
                },
                series: [
                    //地图
                    {
                        type: "map",
                        mapType: "AnHuiJson",
                        // geoIndex: -1,
                        zoom: 1.1, //默认显示级别
                        layoutCenter,
                        layoutSize,
                        // 鼠标经过，字体颜色修改  emphasis： show: true 与 itemStyle 联合
                        label: {
                            show: true,
                            // 地图 默认 字体颜色
                            color: "#ffffff",
                            emphasis: {
                                show: true,
                            },
                        },
                        itemStyle,
                        data: data,
                        selectedMode: false, // 去除地图点击后的黄色背景颜色
                        tooltip: {
                            show: true,
                            trigger: "item",
                            backgroundColor: "transparent",
                            triggerOn: "mousemove",
                            borderColor: "transparent",
                            textStyle: {
                                color: "#fff",
                            },
                            padding: 0,
                            confine: true,
                            extraCssText: "width:70%; height:30vh;",
                            formatter: function (params) {
                                /*
                                    模拟接口获取不同地区数据
                                */
                                const { name } = params;

                                let data = {};
                                if (name === "宿州市") {
                                    data = su_zhou_data;
                                } else {
                                    data = other_data;
                                }
                                const Container = Vue.extend(TooptipCharts);
                                let vm = new Container().$mount();
                                new Promise((resovle) => resovle(data)).then(
                                    (res) => {
                                        vm.$props.info = res;
                                    }
                                );
                                return vm.$el;
                            },
                        },
                    },
                    // 标记点
                    {
                        name: "宿州市政府",
                        type: "scatter",
                        coordinateSystem: "geo",
                        data: convertData([{ name: "宿州市政府" }]),
                        encode: {
                            value: 2,
                        },
                        symbolSize: 12,
                        label: {
                            normal: {
                                show: false, //显示市区标签
                                textStyle: { color: "#c71585" }, //省份标签字体颜色
                            },
                            emphasis: {
                                //对应的鼠标悬浮效果
                                show: true, //关闭文字 （这东西有问题得关）
                                textStyle: { color: "#800080" },
                            },
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 0.5, //区域边框宽度
                                borderColor: "#009fe8", //区域边框颜色
                                areaColor: "#ffefd5", //区域颜色
                            },
                            emphasis: {
                                show: true,
                                borderWidth: 0.5,
                                borderColor: "#4b0082",
                                areaColor: "#f47920",
                            },
                        },
                        // tooltip: {
                        //     show: true,
                        //     formatter: (params) => {
                        //         return params.seriesName;
                        //     },
                        // },
                    },
                ],
            };

            if (option && typeof option === "object") {
                this.myChart.setOption(option);
            }

            window.addEventListener("resize", this.resize);
        },

        resize() {
            if (this.myChart) {
                setTimeout(() => {
                    this.myChart?.resize();
                }, 50);
            }
        },
    },
};
</script>

<style></style>
